// 处理文件插件
const path = require("path");

// 启动后自动生成预览页
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlplugin = new HtmlWebpackPlugin({
    template: "./src/vue_index.html", // 指定要用到的模板文件
    filename: "index.html", // 指定生成的文件名
    minify: {
        minimize: true, // 打包为最小值
        removeComments: true, // 去除注释
        collapseWhitespace: true, // 去除空格
        minifyJS: true // 压缩html内的js代码       
    },
    hash: true // 加上哈希值避免缓存
})

// 配置 vue-loader
const {
    VueLoaderPlugin
} = require("vue-loader");
const vueplugin = new VueLoaderPlugin();

// 模块热更新
const webpack = require('webpack')
const HotModule = new webpack.HotModuleReplacementPlugin()

// clean-webpack-plugin 
// 用于在打包前清理上一次打包的文件夹，使每次打包都是最新的
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const cleanbuild = new CleanWebpackPlugin()

// mini-css-extract-plugin
// 将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = new MiniCssExtractPlugin({
    // 生成的css文件放置地址以及文件名
    filename: 'css/[name].css',
    chunkFilename: 'css/[id].css',
})

// optimize-css-assets-webpack-plugin
// 压缩 css 代码
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const optimizecssplugin = new OptimizeCSSAssetsPlugin();

// copy-webpack-plugin
// 我们在项目中引入了静态资源，但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录
// 因此 copy-webpack-plugin 就可以很好地帮我做拷贝的工作了。
const CopyWebpackPlugin = require('copy-webpack-plugin')
const copyplugin = new CopyWebpackPlugin({
    patterns: [{
            from: path.join(__dirname, './src/lib'),
            to: path.join(__dirname, './dist/lib')
        },
        {
            from: path.join(__dirname, "./src/img"),
            to: path.join(__dirname, "./dist/img")
        }
    ]
})



module.exports = {
    /**
     * mode：编译模式
     * development：开发模式，打包的出来的文件没有经过压缩，体积较大，但是打包速度快
     * production：生产模式，打包出来的文件经过压缩，体积小，但是打包速度慢
     */
    mode: "development",
    /**
     * entry：打包的入口文件，表示从此目录下进入
     */
    entry: path.join(__dirname, "./src/main.js"),
    /**
     * output：打包的出口文件
     * path：打包后的文件存放地址
     * filename：打包生成的文件名
     */
    output: {
        path: path.join(__dirname, "./dist"),
        // 使用时间戳命名打包生成的build文件，保证每次打包的文件都不一样
        filename: 'js/' + new Date().getTime() + 'build.js'
    },
    /**
     * plugings：配置相关插件
     */
    plugins: [
        htmlplugin,
        vueplugin,
        HotModule,
        cleanbuild,
        ExtractTextPlugin,
        optimizecssplugin,
        copyplugin
    ],
    /**
     * 配置相关加载器，处理非js文件
     */
    module: {
        rules: [{
                test: /\.css$/,
                use: ["style-loader", {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // 这里可以指定一个 publicPath
                        // 默认使用 webpackOptions.output中的publicPath
                        publicPath: '../'
                    },
                }, "css-loader", "postcss-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader'
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    }
}